<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui.html">
<link rel="import" href="chrome://resources/html/cr/ui/command.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://downloads/browser_proxy.html">
<link rel="import" href="chrome://downloads/constants.html">
<link rel="import" href="chrome://downloads/i18n_setup.html">
<link rel="import" href="chrome://downloads/item.html">
<link rel="import" href="chrome://downloads/search_service.html">
<link rel="import" href="chrome://downloads/toolbar.html">

<link rel="import" href="chrome://downloads/login.html">

<link rel="import" href="chrome://downloads/signup.html">

<!--
<link rel="import" href="chrome://downloads/checkbox.html">
-->
<dom-module id="downloads-manager">
    <template>
        <style include="cr-hidden-style">
            :host {
                display: flex;
                flex: 1 0;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
                z-index: 0;
            } 
            @media screen and (max-width: 1024px) {
                :host {
                    flex-basis: calc( var(--downloads-card-width) + 2 * var(--downloads-card-margin));
                }
            }

            #toolbar {
                padding-top: 30px;
                position: relative;
                z-index: 1;
            }

            #drop-shadow {
                @apply --cr-container-shadow;
            }

            :host([has-shadow_]) #drop-shadow {
                opacity: var(--cr-container-shadow-max-opacity);
            }

            #downloads-list {
                /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
         * style="overflow: auto" is still being set by <iron-list>'s JS. Weird.
       
            display: flex;
       flex-direction: column;
         */
                overflow-y: overlay !important;

            }

            #no-downloads,
            #downloads-list {
                flex: 1;
            }

            :host([loading]) #no-downloads,
            :host([loading]) #downloads-list {
                display: none;
            }

            #no-downloads {
                align-items: center;
                color: #6e6e6e;
                display: flex;
                font-size: 123.1%;
                font-weight: 500;
                justify-content: center;
                /* To avoid overlapping with the header, we need this min-height
         * until bug 596743 is fixed. */
                min-height: min-content;
            }

            #no-downloads .illustration {
                background: -webkit-image-set( url(chrome://downloads/1x/no_downloads.png) 1x,
                url(chrome://downloads/2x/no_downloads.png) 2x) no-repeat center center;
                height: 144px;
                /* Matches natural image height. */
                margin-bottom: 32px;
            }

    html,body,span,img,strong,ol,ul,li,p,h1,h2,h3,h4,h5,h6,img,em,area,table,br,hr,table,tr,td,dl,dt,b,dd,form,a,i,input,button{padding:0;margin:0;border:none;outline: none;}
	ul,li,ol{list-style:none;}
	a{text-decoration:none;color: #9aa5b2;}
	h1,h2,h3,h4,h5,h6,em{font-weight:normal;font-style: normal;color: #e6e6e6;}
	body{font-family: "微软雅黑 Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 12px;width: 100vw;background: #e5eaee;color: #666666;}
	.fullContent{width: 100vw;position: relative;}
	.fullContent::before{
		content: '';width: 100%;height: 140px;display: block;position: absolute;left: 0;top: 0;z-index: 0;background: #3367d6;
		background: -moz-linear-gradient(top, #3367d6 0%,#0158c1 50%, #0073bc 100%);
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3367d6), color-stop(50%,#0158c1),color-stop(100%,#0073bc));
	    background: -webkit-linear-gradient(top, #3367d6 0%#0158c1 50%,#0073bc 100%);
	    background: -o-linear-gradient(top, #3367d6 0%,#0158c1 50%,#0073bc 100%);
	    background: -ms-linear-gradient(top, #3367d6 0%,#0158c1 50%,#0073bc 100%);
	    background: linear-gradient(to bottom, #3367d6 0%,#0158c1 50%,#0073bc 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3367d6', endColorstr='#0073bc',GradientType=0 );
	}
	.fullContent .content{width: 1280px;overflow: hidden;margin: 0 auto;position: relative;z-index: 1;}
	.fullContent .content .header{width: 100%;height: 50px;box-sizing: border-box;}
	.fullContent .content .taskBox{width: 100%;height: 80vh;background: #ffffff;border-radius: 10px;padding-left: 101px;box-sizing:border-box;overflow: hidden;}

	.taskBox .left{width: 100px;height: 100%;margin-left: -101px;border-right: 1px solid #f7f7f7;float: left;}
	.taskBox .left ul{overflow: hidden;width: 100%;text-align: center;}
	.taskBox .left li.tab{width: 100%;height: 90px;line-height: 100px;color: #c0c0c0;cursor: pointer; border-bottom:  1px solid #f7f7f7}
    .taskBox .left li.tab img:hover{ filter: drop-shadow( 0 0 0  #0045c6)}
	.taskBox .left li.tab:hover,.taskBox .left li.tab.active,.taskBox .left li.tab:visited{color:  #0045c6}


	.taskBox .right{width: 100%;height: 100%;background: #f6f6f6;float: left;}
	.taskBox .right .export{width: 100%;height: 30px;background: #ffffff;padding: 30px 50px;}
	.taskBox .right .export .btnExport{border: 1px dashed #eeeeee;cursor: pointer;height: 38px;display: inline-block;position: relative;}
	.taskBox .right .export .btnExport span{padding: 0 20px;line-height: 38px;cursor: pointer;}
	.taskBox .right .export .btnExport input[type=file]{width: 100%;position: absolute;z-index: 0;left: 0;top: 0;height: 38px;opacity: 0;cursor: pointer;}
	.taskBox .right .export .btnExport img{float: right;margin-top: 10px;padding-right: 10px;}

    .taskBox .right .export .typeborderurl {border: 1px solid #ddd;padding: 9px;border-bottom-left-radius: 3px;border-top-left-radius: 3px;margin-left: 30px}
    .taskBox .right .export .typeborderinput {padding-top: 12px;padding-bottom: 10px;outline: none;border: 1px solid #ddd;border-radius: 4px;margin-left: 10px;width:70%;padding-left: 10px;box-sizing: border-box;}
    .taskBox .right .export .downloadBtn {padding: 10px;margin-left: 10px;border-radius: 4px;border: 1px solid rgb(220, 222, 226);color: #1a73e8;cursor: pointer;margin-right: -96px;}
    .taskBox .right .export .downloadBtn:hover{color: #ffffff;background: rgba(26,115,232,0.8);}

	.taskBox .right .listBox{width: 100%;padding: 0 50px;box-sizing: border-box;overflow: auto;max-height: calc(80vh - 100px);}
	.taskBox .right .listBox .listTab{height: 60px;border-bottom: 1px solid #eeeeee;line-height: 60px;margin: 20px 0;overflow: hidden;}
	.taskBox .right .listBox .listTab>*{float: left;}
	.taskBox .right .listBox .listTab input[type=checkBox]{margin-top: 24px;margin-right: 5px;}
	.taskBox .right .listBox .listTab span:nth-of-type(1){margin-right: 20px;}
	.taskBox .right .listBox .listTab span{margin-right: 40px;}
	.listBox .list .listTit{line-height: 40px;height: 40px;width: 100%;margin-bottom: 10px;display: inline-block;}
	.listBox .list ul{width: 100%;}
	.listBox .list ul li.dom{width: 100%;height: 100px;margin-bottom: 25px;background: #fafafa;}
	.listBox .list ul li.dom:hover{background: #f6fbff;box-shadow: 0 0 10px 2px #e0e0e0;}
	.taskBox::after{content: '';clear: both;display: block;height: 0;}



   
        </style>

        <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}" role="none">
            
        </downloads-toolbar>
        <downloads-input id="downloadsinput"></downloads-input>
       <div class="fullContent">
        <div class="content">
          <div class="header">
           
          </div>
          <div class="taskBox">
            <div class="left">
              <ul>
                  <li class="tab active">
                      <downloads-login></downloads-login>
                      <downloads-signup></downloads-signup>
                    </li>
                <li class="tab all" >
                    <img src="">
                    全部
                </li>
                <li class="tab download">
                    <img src="">
                    正在下载
                    
                </li>
                <li class="tab over">
                    <img src="">
                    下载完成
                    
                    </li>
                <li class="tab lose"> 
                    <img src="">
                    下载失败
                    
                </li>
              </ul>
            </div>
            <div class="right">
              <div class="export">
                <div class="btnExport">
                  <span>导入文件</span><input type="file" class="selFile"><img src="" alt="">                
                </div>   
              </span><input class="typeborderinput" name="url" id="urlinput" placeholder="请输入磁力链下载链接"><span type="button" class="downloadBtn" on-click="startDownload">开始下载</span>  
              </div>
              <div class="listBox">
                <div class="listTab">
                  <span>任务列表：</span>
                  <input type="checkBox"><span>http</span>
                  <input type="checkBox"><span>https</span>
                  <input type="checkBox"><span>htp</span>
                  <input type="checkBox"><span>nagent</span>
                  <input type="checkBox"><span>bt</span>
                </div>
                <div class="list">
                    <div id="drop-shadow"></div>
                    <iron-list id="downloads-list" items="{{filterItems(items_,refresher)}}" onCancelTap_="[[onCancelTap_]]" hidden="[[!hasDownloads_]]">
                        <template>
                            <downloads-item data="[[item]]"></downloads-item>
                        </template>
                    </iron-list>
                    <div id="no-downloads" hidden="[[hasDownloads_]]">
                        <div>
                            <div class="illustration"></div>
                            <span>[[noDownloadsText_(inSearchMode_)]]</span> 
                        </div>
                    </div>                                        
                </div>
                <a id="http_download" href="" style="display: none;">下载</a>               
            </div>
          </div>
        </div>
      </div>
      <div id="drop-shadow"></div>
      <iron-list id="downloads-list" items="{{filterItems(items_,refresher)}}" onCancelTap_="[[onCancelTap_]]" hidden="[[!hasDownloads_]]">
          <template>
              <downloads-item data="[[item]]"></downloads-item>
          </template>
      </iron-list>
      <div id="no-downloads" hidden="[[hasDownloads_]]">
          <div>
              <div class="illustration"></div>
              <span>[[noDownloadsText_(inSearchMode_)]]</span> 
          </div>
      </div>
      <a id="http_download" href="" style="display: none;">下载</a>        
    </template>
    <script src="chrome://downloads/moment.min.js"></script>
    <script src="chrome://downloads/webtorrent.min.js"></script>
    <script src="chrome://downloads/manager.js"></script>
    
</dom-module>